src/components/Navbar.tsx (1)

92-97: Logo img: add display sizing and eager/priority hints

Set a predictable rendered size and prioritize the above-the-fold logo for LCP; also enable async decoding.

-          <img
-            src="/logo.svg"
-            alt="Request Network"
-            width={100}
-            height={200}
-          />
+          <img
+            src="/logo.svg"
+            alt="Request Network"
+            width={100}
+            height={200}
+            className="h-8 w-auto"
+            loading="eager"
+            decoding="async"
+            fetchpriority="high"
+          />

If the goal is to reduce memory, confirm that the rendered size matches design expectations (e.g., h-8) and doesn’t upscale the intrinsic asset.

src/components/EventShowcase.tsx (1)

72-76: Ensure image fills its aspect-ratio container and lazily loads

Without h-full/w-full the image may not fully cover the 16:9 box. Also add lazy loading/async decoding.

-                  <img
-                    src={event.image}
-                    alt={event.name}
-                    className="object-cover transition-transform duration-300 group-hover:scale-105"
-                  />
+                  <img
+                    src={event.image}
+                    alt={event.name}
+                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    loading="lazy"
+                    decoding="async"
+                  />

For sharper images on high-DPR screens, consider adding a srcSet with a 2x variant (e.g., increasing the w param) in a follow-up.

src/app/(demo)/page.tsx (1)

40-44: Carousel slide image: fill container + lazy/async

Match the container’s aspect ratio and defer decoding.

-                      <img
-                        src={event.headerImage}
-                        alt={event.name}
-                        className="object-cover"
-                      />
+                      <img
+                        src={event.headerImage}
+                        alt={event.name}
+                        className="h-full w-full object-cover"
+                        loading="lazy"
+                        decoding="async"
+                      />

If the first slide is above the fold, consider eager loading only for that slide (index 0) and lazy for the rest.

src/app/(demo)/event/[id]/page.tsx (2)

29-34: Hero image: fill, eager load, and set fetch priority

Bring back LCP-friendly behavior you previously got from next/image and ensure full coverage within the fixed-height container.

-      <div className="relative h-[400px] w-full overflow-hidden">
-        <img
-          src={event.headerImage}
-          alt={event.name}
-          className="object-cover w-full"
-        />
+      <div className="relative h-[400px] w-full overflow-hidden">
+        <img
+          src={event.headerImage}
+          alt={event.name}
+          className="h-full w-full object-cover"
+          loading="eager"
+          decoding="async"
+          fetchpriority="high"
+          sizes="100vw"
+        />

Confirm LCP doesn’t regress compared to next/image on this route.

---

87-91: Organizer avatar: fill container + lazy/async

Ensure the avatar fully covers the circular frame and defers loading.

-                  <img
-                    src={event.organizer.logo}
-                    alt={event.organizer.name}
-                    className="object-cover"
-                  />
+                  <img
+                    src={event.organizer.logo}
+                    alt={event.organizer.name}
+                    className="h-full w-full object-cover"
+                    loading="lazy"
+                    decoding="async"
+                  />

src/const/data.json (1)

57-59: Optional: plan for high-DPR screens

To keep memory in check while improving sharpness on Retina, consider adding srcSet in components (not here) with a 2x variant (e.g., same URL with doubled w), letting the browser choose.

Also applies to: 106-108, 148-150, 197-199, 246-248, 288-290, 330-332, 372-374, 414-416

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: aimensahnoun
PR: RequestNetwork/rn-checkout#22
File: src/app/(demo)/event/[id]/page.tsx:105-107
Timestamp: 2024-11-15T11:08:35.434Z
Learning: In the `EventDetailsPage` component in `src/app/(demo)/event/[id]/page.tsx`, adding an error boundary to the `TicketSelector` component and optimizing props by only passing necessary event data is not required.

Learnt from: aimensahnoun
PR: RequestNetwork/rn-checkout#22
File: src/app/(demo)/page.tsx:26-26
Timestamp: 2024-11-15T11:05:58.024Z
Learning: In `src/app/(demo)/page.tsx`, when reviewing the carousel component, it's not necessary to add accessibility controls such as `pauseOnHover` and adjusting the `interval`.

Learnt from: aimensahnoun
PR: RequestNetwork/rn-checkout#22
File: src/app/(demo)/event/[id]/page.tsx:8-13
Timestamp: 2024-11-15T11:08:56.671Z
Learning: In `src/app/(demo)/event/[id]/page.tsx`, the `getEventById` function always receives a valid, hardcoded ID. Therefore, checking for undefined or null IDs is unnecessary in this context.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Learnt from: aimensahnoun
PR: RequestNetwork/rn-checkout#22
File: src/app/(demo)/event/[id]/page.tsx:105-107
Timestamp: 2024-11-15T11:08:35.434Z
Learning: In the `EventDetailsPage` component in `src/app/(demo)/event/[id]/page.tsx`, adding an error boundary to the `TicketSelector` component and optimizing props by only passing necessary event data is not required.